<link href="/javascripts/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet">

<script src="/javascripts/datetimepicker/moment-with-locales.js"></script>
<script src="/javascripts/datetimepicker/bootstrap-datetimepicker.js"></script>

<div class="page-header no-breadcrumb font-header">添加用户</div>
<div class="content-wrap">
    <div class="panel panel-default">
        <!--panel-body-->
        <div class="panel-body">
            <div class="form-horizontal font-12">
                <form novalidate="novalidate" class="form-horizontal bv-form" method="post" id="defaultForm">

                    <ul class="nav nav-tabs font-12">
                        <li role="presentation" class="active"><a aria-expanded="true" href="#tabHomeEx1"
                                                                  data-toggle="tab">填写基本资料</a></li>
                        <li class="" role="presentation"><a aria-expanded="false" href="#profileHomeEx1"
                                                            data-toggle="tab">分配菜单</a></li>
                        <li class="" role="presentation"><a aria-expanded="false" href="#listHomeEx1" data-toggle="tab">分配栏目</a>
                        </li>
                    </ul>

                    <div class="tab-content b-all no-b-t p-20">
                        <div class="tab-pane fade active in" id="tabHomeEx1">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">用户名</label>

                                <div class="col-sm-8">
                                    <input type="text" placeholder="请输入用户名" class="form-control"
                                           data-bv-field="username"
                                           name="username"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>

                                <div class="col-sm-8">
                                    <input type="password" placeholder="请输入密码" class="form-control"
                                           data-bv-field="password"
                                           name="password"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">重复密码</label>

                                <div class="col-sm-8">
                                    <input type="password" placeholder="请输入密码" class="form-control"
                                           data-bv-field="confirmPassword" name="confirmPassword"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>

                                <div class="col-sm-7">
                                    <input type="password" class="form-control"/>
                                </div>
                                <div class="col-sm-1 text-right">
                                    <a href="/user/changepassword" class="control-line">修改密码</a>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">用户状态</label>

                                <div class="col-sm-8">
                                    <label class="checkbox-inline">
                                        <input type="radio" data-bv-field="Enable" value="0" name="Enable"> 启用
                                    </label>
                                    <label class="checkbox-inline">
                                        <input type="radio" data-bv-field="Enable" value="1" name="Enable"> 禁用
                                    </label>
                                </div>
                            </div>
                            <div class="form-group  " id="qixian">
                                <label class="col-sm-2 control-label">服务期限</label>

                                <div class="col-sm-3">
                                    <div class='input-group  datepick datepickstart'>
                                        <input type='text' class="form-control" name="StartDate"
                                               data-bv-field="StartDate" placeholder="请选择开始日期"/>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class='input-group  datepick datepickend'>
                                        <input type='text' class="form-control" name="EndDate" data-bv-field="EndDate"
                                               placeholder="请选择结束日期"/>

                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>


                                    </div>
                                    <small class="help-block" style=""></small>


                                </div>
                            </div>
                        </div>

                    </div>

                    <hr class="line-dashed">

                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button class="btn btn-primary" type="submit">保存</button>
                            <button id="resetBtn" class="btn btn-info" type="button">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--panel-body-->
    </div>
</div>


<script type="text/javascript">

    var formId = '#defaultForm';


    if ($("#id").val() > 0) {
        $("#loginName").attr("readonly", true);
        $('input[name=StartDate]').attr("readonly", true);

    } else {
//        if (!$("input[name=StartDate]").val() && !$("input[name=EndDate]").val()) {
//
//        }
    }



    $(function() {
        $(formId).bootstrapValidator({
            //        live: 'disabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名无效',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            max: 20,
                            message: '用户名不超过20个字符'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        regexp: {
                            regexp: /[0-9a-zA-Z]/,
                            message: '密码只能由字母、数字组成'
                        },
                        stringLength: {
                            min: 6,
                            message: '密码不能小于6为'
                        }
                    }
                },
                StartDate: {
                    validators: {
                        notEmpty:{
                            message: '请选择开始时间'
                        }
                    }
                },
                EndDate: {
                    validators: {
                        notEmpty:{
                            message: '请选择终止时间'
                        }
                    }
                }

            }
        })
        $(".datepickstart").on("dp.change", function(e) {
            $('.datepickend').data("DateTimePicker").minDate(e.date);
        });
        $(".datepickend").on("dp.change", function(e) {
            $('.datepickstart').data("DateTimePicker").maxDate(e.date);

        });

        $('.datepickstart,.datepickend') .on('dp.change dp.show', function (e) {
            // Validate the date when user change it
            $(formId).data('bootstrapValidator').revalidateField('StartDate');
            $(formId).data('bootstrapValidator').revalidateField('EndDate');
        });

        $('.datepickstart').datetimepicker({
            locale: 'zh-cn',
            format: 'YYYY-MM-DD'
        });
        $('.datepickend').datetimepicker({
            locale: 'zh-cn',
            format: 'YYYY-MM-DD',
            useCurrent: false
        });


        // Generate a simple captcha

        function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        };
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));


        $('#resetBtn').click(function() {
            $('#defaultForm').data('bootstrapValidator').resetForm(true);
        });
    });

</script>
